import React from 'react';
import { Steps, Button, message } from 'antd';
import { connect } from 'umi';

const StepsBar = ({ form1, form2, form3 }) => {
  const { Step } = Steps;
  const [current, setCurrent] = React.useState(0);

  const steps = [
    {
      title: '完善基本信息',
      content: form1,
    },
    {
      title: '编辑正文',
      content: form2,
    },
    {
      title: '预览和提交',
      content: form3,
    },
  ];
  const next = () => {
    setCurrent(current + 1);
  };

  const prev = () => {
    setCurrent(current - 1);
  };

  return (
    <>
      <Steps current={current}>
        {steps.map(item => (
          <Step key={item.title} title={item.title} />
        ))}
      </Steps>

      <div>{steps[current].content}</div>
      <div>
        {current < steps.length - 1 && (
          <Button type="primary" onClick={() => next()}>
            下一步
          </Button>
        )}
        {current === steps.length - 1 && (
          <Button type="primary" onClick={() => message.success('Processing complete!')}>
            完成
          </Button>
        )}
        {current > 0 && (
          <Button style={{ margin: '0 8px' }} onClick={() => prev()}>
            上一步
          </Button>
        )}
      </div>
    </>
  );
};

export default connect(() => ({}))(StepsBar);
